<template>
  <!-- <div> -->
  <div class="Statistic_box2">
    <el-row>
      <el-col :span="6">
        <el-statistic title="总评论数据" :value="Statistic_list.sum" />
      </el-col>

      <el-col :span="6">
        <el-statistic title="景点好评" :value="Statistic_list.good" />
      </el-col>
      <!-- <el-col :span="6">
        <div class="Scenery_box">
          <h1 class="title">等级</h1>
          <p class="info">
            <el-rate
              :texts="['超级差', '差', '一般', '良', '优秀']"
              show-text
              disabled
              show-score
              text-color="#A31127"
              score-template="{value} 分"
              v-model="rate_list"
              allow-half
            />
          </p>
        </div>
       
      </el-col> -->
      <el-col :span="6">
        <el-statistic title="景点中评" :value="Statistic_list.medium" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="景点差评" :value="Statistic_list.bad" />
      </el-col>
    </el-row>
  </div>
  <!-- </div> -->
</template>

<script setup lang="ts">
import { getComm_evaluate_count } from "@/request/analysis";
const activeName = ref("first");
const rate_list = ref(1);
let Statistic_list = ref([]);
const parent_list: Array<any> = ref(props.info_data);
const props = defineProps({
  city_id_list: {
    type: String,
    default: 0
  },
  info_data: {
    type: String,
    default: 0
  }
});

onMounted(() => {
  // initEcharts();
  // getData();
  // console.log(props.city_id_list);
});

const getData = async item => {
  await getComm_evaluate_count({
    list_id: item
  }).then(({ data }) => {
    // console.log(data[0]);
    Statistic_list.value = data[0];
    // console.log("Statistic_list",Statistic_list.value);
  });
};

watch(
  () => props.city_id_list,
  (newValue, oldValue) => {
    if (newValue) {
      // console.log("新增");
      // console.log(newValue);

      getData(newValue);
    }
  }
);
watch(
  () => props.info_data,
  (newValue, oldValue) => {
    if (newValue) {
      parent_list.value = props.info_data;
      // console.log("==========",props.info_data);
        rate_list.value = props.info_data.SPOT_GRADE_TOP5 ?  props.info_data.SPOT_GRADE_TOP5: props.info_data.GRADE;
      
      // if (props.info_data.SPOT_GRADE_TOP5) {
      //   rate_list_fire.value = props.info_data.SPOT_GRADE_TOP5;
      // } else {
      //   rate_list.value = props.info_data.GRADE;
      // }
      // console.log(props.info_data.SPOT_GRADE_TOP5);
    }
    // console.log("new===========Value", newValue);
  }
);
</script>

<style lang="scss" scoped>
.Statistic_box2 {
  padding-top: 10px;
  height: 9%;
  width: 100%;
  /* height: 500px; */
  background-color: aliceblue;
}

.el-col {
  text-align: center;
}
.title{
  color: rgb(58, 55, 52);
  margin-top: 4px;
font-size: 12px;
}
</style>